{% extends "base.html" %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'cs/home.css' %}">
{% endblock %}



{% block content %}
    <!-- 电影轮播区 -->
    <div id="mainCarousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
            <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#mainCarousel" data-slide-to="1"></li>
            <li data-target="#mainCarousel" data-slide-to="2"></li>
        </ol>

        <!-- 幻灯片 -->
        <div class="carousel-inner" role="listbox">
            <!-- 幻灯片1 -->
            <div class="item active" style="background-image: url('/media/poster/tt15239678.png')">
                <div class="carousel-caption">
                    <h2 class="movie-title">沙丘：第二部</h2>
                    <div class="movie-info">
                        <div>科幻 / 冒险 / 动作</div>
                        <div class="movie-rating">★★★★☆ 8.9</div>
                        <p>保罗·厄崔迪踏上面向未知的旅程，他与弗雷曼人相遇，寻求报复阴谋毁灭他的家族的人们。</p>
                    </div>
                    <button class="btn btn-ticket">立即购票</button>
                </div>
            </div>

            <!-- 幻灯片2 -->
            <div class="item" style="background-image: url('/media/poster/tt15239678.png')">
                <div class="carousel-caption">
                    <h2 class="movie-title">奥本海默</h2>
                    <div class="movie-info">
                        <div>剧情 / 传记 / 历史</div>
                        <div class="movie-rating">★★★★☆ 8.8</div>
                        <p>美国理论物理学家罗伯特·奥本海默参与研制原子弹计划，成为"原子弹之父"后又陷入政治旋涡。</p>
                    </div>
                    <button class="btn btn-ticket">立即购票</button>
                </div>
            </div>

            <!-- 幻灯片3 -->
            <div class="item" style="background-image: url('/media/poster/tt15239678.png')">
                <div class="carousel-caption">
                    <h2 class="movie-title">蜘蛛侠：纵横宇宙</h2>
                    <div class="movie-info">
                        <div>动画 / 动作 / 冒险</div>
                        <div class="movie-rating">★★★★☆ 8.7</div>
                        <p>迈尔斯·莫拉莱斯开启更宏大的多元宇宙冒险，每个蜘蛛侠都面临着命运抉择的挑战。</p>
                    </div>
                    <button class="btn btn-ticket">立即购票</button>
                </div>
            </div>
        </div>

        <!-- 控制按钮 -->
        <a class="carousel-control left" href="#mainCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一张</span>
        </a>
        <a class="carousel-control right" href="#mainCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>
    </div>

    <div class="container">
        <!-- 正在热映 -->
        <div class="row">
            <div class="col-md-12">
                <h3 class="section-title">正在热映</h3>
            </div>

            <div class="col-md-3 col-sm-6">
                <div class="movie-card">
                    <img src="/media/poster/tt14539740.png" alt="哥斯拉大战金刚2">
                    <div class="info">
                        <h4>哥斯拉大战金刚2</h4>
                        <div class="genres">动作 / 科幻 / 冒险</div>
                        <div class="movie-rating">★★★☆☆ 7.8</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <div class="movie-card">
                    <img src="/media/poster/tt14539740.png" alt="功夫熊猫4">
                    <div class="info">
                        <h4>功夫熊猫4</h4>
                        <div class="genres">动画 / 喜剧 / 冒险</div>
                        <div class="movie-rating">★★★★☆ 8.2</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <div class="movie-card">
                    <img src="/media/poster/tt14539740.png" alt="异形：觉醒">
                    <div class="info">
                        <h4>异形：觉醒</h4>
                        <div class="genres">科幻 / 惊悚 / 恐怖</div>
                        <div class="movie-rating">★★★☆☆ 7.5</div>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <div class="movie-card">
                    <img src="/media/poster/tt14539740.png" alt="惊奇队长2">
                    <div class="info">
                        <h4>惊奇队长2</h4>
                        <div class="genres">动作 / 科幻 / 冒险</div>
                        <div class="movie-rating">★★★☆☆ 7.9</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门演员 -->
        <div class="row">
            <div class="col-md-12">
                <h3 class="section-title">热门演员</h3>
            </div>

            <div class="col-md-3 col-sm-6">
                <div class="movie-card">
                    <img src="/media/poster/tt14539740.png" alt="死侍与金刚狼">
                    <div class="info">
                        <h4>死侍与金刚狼</h4>
                        <div class="genres">动作 / 喜剧 / 科幻</div>
                        <div class="release-date">10月1日上映</div>
                    </div>
                </div>
            </div>

            {#            <div class="col-md-3 col-sm-6">#}
            {#                <div class="movie-card">#}
            {#                    <img src="/media/poster/tt14539740.png" alt="小丑2">#}
            {#                    <div class="info">#}
            {#                        <h4>小丑2</h4>#}
            {#                        <div class="genres">剧情 / 犯罪 / 惊悚</div>#}
            {#                        <div class="release-date">10月15日上映</div>#}
            {#                    </div>#}
            {#                </div>#}
            {#            </div>#}
            {##}
            {#            <div class="col-md-3 col-sm-6">#}
            {#                <div class="movie-card">#}
            {#                    <img src="/media/poster/tt14539740.png" alt="狮子王前传">#}
            {#                    <div class="info">#}
            {#                        <h4>狮子王前传</h4>#}
            {#                        <div class="genres">动画 / 冒险 / 剧情</div>#}
            {#                        <div class="release-date">11月5日上映</div>#}
            {#                    </div>#}
            {#                </div>#}
            {#            </div>#}
            {##}
            {#            <div class="col-md-3 col-sm-6">#}
            {#                <div class="movie-card">#}
            {#                    <img src="/media/poster/tt14539740.png" alt="雷霆沙赞3">#}
            {#                    <div class="info">#}
            {#                        <h4>雷霆沙赞3</h4>#}
            {#                        <div class="genres">动作 / 喜剧 / 奇幻</div>#}
            {#                        <div class="release-date">12月20日上映</div>#}
            {#                    </div>#}
            {#                </div>#}
            {#            </div>#}
        </div>
    </div>
{% endblock %}
